<template>
  <view>
    <view class="flex-col page">
  <view class="flex-col section">
    <view class="flex-row justify-between group">
      <view class="flex-row section_2">
        <text class="font text">xxx设备</text>
        <image
          class="ml-2 shrink-0 image_2"
          src="@/static/images/device/1.png"
        />
      </view>
      <image
        class="image"
        src="@/static/images/device/2.png"
      />
    </view>
    <view class="flex-row group_2 mt-21">
      <text class="text_2">小绵羊</text>
      <image
        class="image_3 ml-3"
        src="@/static/images/device/3.png"
      />
    </view>
    <view class="flex-col group_3 mt-21">
      <image
        class="shrink-0 self-center image_4"
        src="@/static/images/device/4.png"
      />
      <view class="flex-row justify-evenly self-stretch relative group_4">
        <view class="flex-col justify-start items-center self-start section_3">
          <view class="flex-col justify-start items-center section_5">
            <view class="flex-col justify-start section_6">
              <view class="flex-col justify-start items-center text-wrapper">
                <text class="font_2 text_3">开心</text>
              </view>
            </view>
          </view>
        </view>
        <view class="flex-col justify-start self-start section_7">
          <view class="flex-col justify-start items-center section_8">
            <view class="flex-col justify-start section_6">
              <view class="flex-col justify-start items-center text-wrapper_3">
                <text class="font_2 text_4">委屈</text>
              </view>
            </view>
          </view>
        </view>
        <view class="flex-col justify-start items-center self-center relative group_5">
          <image
            class="image_5"
            src="@/static/images/device/5.png"
          />
          <view class="flex-col justify-start items-center section_4 pos">
            <view class="flex-col justify-start section_6">
              <view class="flex-col justify-start items-center text-wrapper_2"><text class="font_2">生气</text></view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="flex-col justify-start section_9 mt-21">
      <view class="flex-col section_10">
        <view class="flex-row justify-between items-center group_6">
          <view class="flex-col items-start">
            <text class="text_5">xxxxxxxx设备</text>
            <text class="text_6 mt-11">录音中</text>
          </view>
          <view class="flex-row">
            <image
              class="image_6"
              src="@/static/images/device/6.png"
            />
            <image
              class="ml-14 image_7"
              src="@/static/images/device/7.png"
            />
          </view>
        </view>
        <view class="flex-row group_7">
          <view class="flex-col flex-1 section_11">
            <text class="self-start font_3 text_7">已绑定</text>
            <text class="self-start font_3 text_8">绵阳-陪伴版</text>
            <view class="flex-row justify-between items-center self-stretch group_9">
              <view class="flex-row items-center">
                <image
                  class="shrink-0 image_8"
                  src="@/static/images/device/8.png"
                />
                <text class="ml-8 font_3 text_9">电量</text>
              </view>
              <text class="font_4 text_10">100%</text>
            </view>
            <view class="flex-row justify-between items-center self-stretch group_10">
              <view class="flex-row items-center">
                <image
                  class="shrink-0 image_11"
                  src="@/static/images/device/9.png"
                />
                <text class="font_3 text_11 ml-9">WiFi</text>
              </view>
              <text class="font_4 text_12">正常</text>
            </view>
          </view>
          <view class="ml-10 flex-col shrink-0 group_8">
            <view class="flex-col justify-start self-stretch section_12">
              <view class="flex-col justify-start items-center image-wrapper">
                <image
                  class="image_9"
                  src="@/static/images/device/10.png"
                />
              </view>
            </view>
            <text class="mt-8 self-center font_5">80%</text>
          </view>
          <view class="ml-10 flex-col shrink-0 group_8">
            <view class="flex-col justify-start self-stretch section_13">
              <view class="flex-col justify-start items-center image-wrapper_2">
                <image
                  class="image_10"
                  src="@/static/images/device/11.png"
                />
              </view>
            </view>
            <text class="mt-8 self-center font_5">40%</text>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="flex-col justify-start section_14 mt-117">
    <view class="flex-col justify-start section_15">
      <view class="flex-col justify-start items-center relative section_16">
        <image
          class="image_12"
          src="@/static/images/device/12.png"
        />
        <view class="flex-row equal-division">
          <view class="flex-col items-center group_11 equal-division-item">
            <image
              class="image_8"
              src="@/static/images/device/13.png"
            />
            <text class="mt-4 font_3">首页</text>
          </view>
          <view class="ml-22 flex-col items-center group_11 equal-division-item">
            <image
              class="image_8"
              src="@/static/images/device/14.png"
            />
            <text class="mt-4 font">我的</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss" scoped>
.ml-3 {
  margin-left: 6rpx;
}
.mt-21 {
  margin-top: 42rpx;
}
.mt-11 {
  margin-top: 22rpx;
}
.mt-117 {
  margin-top: 234rpx;
}
.ml-9 {
  margin-left: 18rpx;
}
.page {
  background-color: #fffffa;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  padding: 34rpx 20rpx 0;
  background-image: url('@/static/images/device/15.png');
  background-position: 0% 0%;
  background-size: 750rpx 1624rpx;
  background-repeat: no-repeat;
}
.group {
  padding-left: 40rpx;
  padding-right: 20rpx;
}
.section_2 {
  padding: 12rpx 20rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  height: 48rpx;
}
.image_2 {
  width: 24rpx;
  height: 24rpx;
}
.image {
  margin: 4rpx 0;
  width: 40rpx;
  height: 40rpx;
}
.group_2 {
  padding: 0 32rpx;
}
.text_2 {
  color: #333333;
  font-size: 48rpx;
  font-family: Source Han Sans SC;
  font-weight: 700;
  line-height: 45.22rpx;
}
.image_3 {
  width: 44rpx;
  height: 44rpx;
}
.group_3 {
  height: 832.64rpx;
}
.image_4 {
  width: 624rpx;
  height: 624rpx;
}
.group_4 {
  margin-top: -80rpx;
}
.section_3 {
  padding: 56rpx 0;
  backdrop-filter: blur(18.24rpx);
  background-image: url('@/static/images/device/16.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 260rpx;
  height: 260rpx;
}
.section_5 {
  padding: 16rpx 0;
  backdrop-filter: blur(17.98rpx);
  background-image: url('@/static/images/device/17.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 152rpx;
}
.section_6 {
  background-image: url('@/static/images/device/18.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 122rpx;
}
.text-wrapper {
  padding: 48rpx 0 44rpx;
  background-color: #ffe944;
  border-radius: 50%;
  width: 122.2rpx;
}
.font_2 {
  font-size: 32rpx;
  font-family: Source Han Sans SC;
  line-height: 29.98rpx;
  font-weight: 700;
  color: #333333;
}
.text_3 {
  line-height: 29.7rpx;
}
.section_7 {
  margin-top: 72rpx;
  backdrop-filter: blur(18.24rpx);
  background-image: url('@/static/images/device/19.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 214rpx;
  height: 216rpx;
}
.section_8 {
  padding: 44rpx 0 48rpx;
  backdrop-filter: blur(17.98rpx);
  background-image: url('@/static/images/device/20.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 214rpx;
}
.text-wrapper_3 {
  padding: 48rpx 0 44rpx;
  background-color: #b8c0de;
  border-radius: 50%;
  width: 122.2rpx;
}
.text_4 {
  line-height: 30.04rpx;
}
.group_5 {
  padding: 8rpx 0;
  width: 214rpx;
}
.image_5 {
  backdrop-filter: blur(18.24rpx);
  width: 192rpx;
  height: 194rpx;
}
.section_4 {
  padding: 44rpx 0;
  backdrop-filter: blur(17.98rpx);
  background-image: url('@/static/images/device/21.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 214rpx;
}
.pos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.text-wrapper_2 {
  padding: 48rpx 0;
  background-color: #ff8989;
  border-radius: 50%;
  width: 122.2rpx;
}
.section_9 {
  margin: 0 8rpx;
  border-radius: 48rpx;
  background-image: url('@/static/images/device/22.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.section_10 {
  margin: 0 4rpx;
  padding: 0 20rpx;
  background-color: #f3eedf;
  border-radius: 48rpx;
}
.group_6 {
  padding: 32rpx 0 32rpx 32rpx;
  border-bottom: solid 1rpx #cccccc;
}
.text_5 {
  color: #333333;
  font-size: 36rpx;
  font-family: Source Han Sans SC;
  line-height: 33.62rpx;
}
.text_6 {
  color: #666666;
  font-size: 28rpx;
  font-family: Source Han Sans SC;
  line-height: 26.04rpx;
}
.image_6 {
  border-radius: 52rpx;
  width: 76rpx;
  height: 40rpx;
}
.image_7 {
  border-radius: 50%;
  width: 40rpx;
  height: 40rpx;
}
.group_7 {
  padding: 32rpx 0 24rpx;
}
.section_11 {
  padding: 36rpx 32rpx 0;
  background-color: #ffffff;
  border-radius: 40rpx;
  height: 340rpx;
}
.group_9 {
  margin-top: 24rpx;
  padding: 28rpx 0 20rpx;
  border-top: solid 2rpx #f8f8f8;
  border-bottom: solid 2rpx #f8f8f8;
}
.image_8 {
  width: 48rpx;
  height: 48rpx;
}
.font_4 {
  font-size: 20rpx;
  font-family: Source Han Sans SC;
  color: #999999;
}
.text_10 {
  line-height: 15.18rpx;
}
.group_10 {
  padding: 32rpx 0 48rpx 4rpx;
}
.image_11 {
  width: 38rpx;
  height: 26.36rpx;
}
.text_12 {
  line-height: 18.42rpx;
}
.group_8 {
  width: 136rpx;
}
.section_12 {
  padding-top: 62rpx;
  background-color: #999999;
  border-radius: 40rpx;
}
.image-wrapper {
  padding: 156rpx 0 32rpx;
  background-color: #ffffff;
  border-radius: 0rpx 0rpx 40rpx 40rpx;
  width: 136rpx;
}
.image_9 {
  width: 54rpx;
  height: 54rpx;
}
.font_5 {
  font-size: 24rpx;
  font-family: Source Han Sans SC;
  line-height: 18.34rpx;
  color: #666666;
}
.section_13 {
  padding-top: 154rpx;
  background-color: #999999;
  border-radius: 40rpx;
}
.image-wrapper_2 {
  padding: 68rpx 0 40rpx;
  background-color: #ffffff;
  border-radius: 0rpx 0rpx 40rpx 40rpx;
  width: 136rpx;
}
.image_10 {
  width: 51.26rpx;
  height: 40rpx;
}
.section_14 {
  background-image: url('@/static/images/device/23.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.section_15 {
  background-image: url('@/static/images/device/24.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.section_16 {
  padding: 32rpx 0 96rpx;
  background-image: url('@/static/images/device/25.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.image_12 {
  width: 94rpx;
  height: 94rpx;
}
.equal-division {
  position: absolute;
  left: 0;
  right: 0;
  top: 46.38rpx;
}
.font {
  font-size: 24rpx;
  font-family: Source Han Sans SC;
  line-height: 22.24rpx;
  color: #666666;
}
.text {
  line-height: 22.42rpx;
}
.font_3 {
  font-size: 24rpx;
  font-family: Source Han Sans SC;
  line-height: 22.24rpx;
  color: #333333;
}
.text_11 {
  line-height: 18.6rpx;
}
.text_9 {
  line-height: 21.62rpx;
}
.text_8 {
  margin-top: 20rpx;
  color: #999999;
  line-height: 22.34rpx;
}
.text_7 {
  line-height: 22.32rpx;
}
.group_11 {
  flex: 1 1 352.78rpx;
}
.equal-division-item {
  padding: 32rpx 0;
}
</style>
    
      